﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ArticleList.aspx.cs" Inherits="famails.BackEnd.Blog.ArticleList" MasterPageFile="~/Master.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div style="width:100%;padding:10px;">
<!--start content 01-->
    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border:1px solid #333;margin-bottom:10px;padding:0px;">
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:10px 20px;background:#000;color:#fff;font-size:18px;font-weight:bold;position:relative;">   
            Danh sách bài viết
        </div>
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:10px;">
            <asp:Panel Visible="false" ID="pnError" runat="server">
                <div class="error-box round">
                    <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
                </div>
            </asp:Panel>
            <asp:Panel Visible="false" ID="pnSuccess" runat="server">
                <div class="confirmation-box round">
                    <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
                </div>
            </asp:Panel>
        </div>
        <asp:Panel ID="pnSearch" runat="server">
        <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto;padding:10px;">
            <fieldset>
                <p>
                    <label for="simple-input" style="font-weight: bolder; text-transform: none">
                        Tiêu đề</label>
                    <asp:TextBox ID="txtName" CssClass="form-control" style="border:1px solid #333;border-radius:0px;" runat="server"></asp:TextBox>
                </p>
            </fieldset>
        </div>
        <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto;padding:10px;">
            <fieldset>
                <p>
                    <label for="simple-input" style="font-weight: bolder; text-transform: none">
                        Trạng thái</label>
                    <asp:DropDownList ID="ddlStatus" CssClass="form-control" style="border:1px solid #333;border-radius:0px;" runat="server">
                        <asp:ListItem Value="-1">Tất cả</asp:ListItem>
                        <asp:ListItem Value="0">Hiển thị</asp:ListItem>
                        <asp:ListItem Value="1">Ẩn</asp:ListItem>
                    </asp:DropDownList>
                </p>
            </fieldset>
        </div>
        <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto;padding:10px;">
            <fieldset>
                <p>
                    <label for="simple-input" style="font-weight: bolder; text-transform: none">
                        Chuyên mục</label>
                    <asp:DropDownList ID="ddkCategory" CssClass="form-control" style="border:1px solid #333;border-radius:0px;" runat="server">
                     </asp:DropDownList>
                </p>
            </fieldset>
        </div>
        <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto;padding:10px;">
            <fieldset>
                <p>
                    <label for="simple-input" style="font-weight: bolder; text-transform: none">
                        Nhóm chuyên mục</label>
                    <asp:DropDownList ID="ddlGroup" CssClass="form-control" style="border:1px solid #333;border-radius:0px;" runat="server">
                     </asp:DropDownList>
                </p>
            </fieldset>
        </div>
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:10px;">
                <div id="btnSearch" style="float:left;margin-right:10px;background:#333;color:#fff;text-align:center;padding:6px 15px;border-radius:0px;" class="btn">
                    <span style="margin-right:10px;" class="fa fa-search"></span> Tìm kiếm
                </div>
                <div id="btnExportExcel" style="float:left;margin-right:10px;background:#333;color:#fff;text-align:center;padding:6px 15px;border-radius:0px;" class="btn">
                    <span style="margin-right:10px;" class="fa fa-mail-forward"></span> Xuất dữ liệu
                </div>
                
                <a id="Button1" href="Article.aspx" class="btn" style="background:#333;color:#fff;text-align:center;font-weight:bold;padding:5px 10px;border-radius:0px;float:left;margin-right:5px;"
                    ><span style="margin-right:10px;" class="fa fa-plus"></span> Thêm mới</a>
        </div>
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:10px;" id="pnlSearch">
                <!-- end content-module-main -->
                <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
                    <div id="jqxgrid">
                    </div>                    
                    <div id="popupWindow">
                        <div>
                            Xóa bài viết
                        </div>
                        <div style="overflow: hidden;">
                            <p>
                                Bạn có chắc là muốn xóa bài viết này không?
                            </p>
                            <button id="del">
                                Yes</button>
                            <button id="cancel">
                                No</button>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                jQuery(function ($) {
                    $("#btnExportExcel").click(function () {
                        $("#jqxgrid").jqxGrid('exportdata', 'xls', 'articlelist');
                    });

                    $("#btnSearch").click(function () {
                        $("#jqxgrid").jqxGrid('showloadelement');
                        var postValue = "{keyword:'" + $('#ContentPlaceHolder1_txtName').val() + "',show:" + $('#ContentPlaceHolder1_ddlStatus').val() + ",categoryid:" + $('#ContentPlaceHolder1_ddkCategory').val() + ",groupid:" + $('#ContentPlaceHolder1_ddlGroup').val() + "}";
                        //alert(postValue);
                        $.ajax({
                            type: "POST",
                            url: "ArticleList.aspx/Search",
                            data: postValue,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                var source =
                        {
                            datatype: "json",
                            datafields: [
                                { name: 'ArticleID', type: 'int' },
                                { name: 'Title', type: 'string' },
                                { name: 'Summary', type: 'string' },
                                    { name: 'CategoryName', type: 'string' },
                                    { name: 'GroupName', type: 'string' },
                                    { name: 'Show', type: 'string' }
                            ],
                            id: 'ArticleID',
                            localdata: data,
                            pager: function (pagenum, pagesize, oldpagenum) {
                            }
                        };
                                var dataAdapter = new $.jqx.dataAdapter(source);
                                $("#jqxgrid").jqxGrid(
                                {
                                    width: $('#pnlSearch').width(),
                                    source: dataAdapter,
                                    selectionmode: 'multiplerowsextended',
                                    sortable: true,
                                    pageable: true,
                                    autoheight: true,
                                    columnsresize: true,
                                    columns: [
                                        { text: 'Tên bài viết', datafield: 'Title' },
                                        { text: 'Tóm tắt', datafield: 'Summary', width: 200, cellsformat: 'D' },
                                        { text: 'Tên chuyên mục', datafield: 'CategoryName', width: 100, cellsformat: 'F2', cellsalign: 'right' },
                                        { text: 'Tên nhóm chuyên mục', datafield: 'GroupName', width: 200 },
                                        { text: 'Hiển thị', datafield: 'Show', width: 100 },
                                        {
                                            text: 'Chỉnh sửa', datafield: 'Edit', columntype: 'button', width: 90, cellsrenderer: function () {
                                                return "Chỉnh sửa";
                                                //return '<input type="image" style="margin-left: 5px;" height="30" width="30" src="../resource/images/delete-icon.png"/>';
                                            }, buttonclick: function (row) {
                                                editrowindex = row;
                                                var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "ArticleID");
                                                window.location = 'Article.aspx?aid=' + id;
                                            }
                                        },
                                        {
                                            text: 'Xóa', datafield: 'Delete', columntype: 'button', cellsrenderer: function () {
                                                return "Xóa";
                                            }, buttonclick: function (row) {
                                                // open the popup window when the user clicks a button.
                                                id = $("#jqxgrid").jqxGrid('getrowid', row);
                                                var offset = $("#jqxgrid").offset();
                                                $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                                                // show the popup window.
                                                $("#popupWindow").jqxWindow('show');
                                            }
                                        }]
                                });

                            }
                        });
                    });
                    $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
                    $("#del").jqxButton({ theme: theme });
                    $("#cancel").jqxButton({ theme: theme });
                    $("#del").click(function () {
                        $.ajax({
                            type: "POST",
                            url: "ArticleList.aspx/Delete",
                            data: "{id:" + id + "}",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                $('#jqxgrid').jqxGrid('deleterow', id);
                                $("#popupWindow").jqxWindow('hide');
                            }
                        });
                    });
                    $("#cancel").click(function () {
                        $("#popupWindow").jqxWindow('hide');
                    });
                });
            </script>

        </asp:Panel>
    </div>
</div>
</asp:Content>